<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>登录/注册</title>
	<link rel="stylesheet" href="css/auth.css">
	<style>
	.file {
	    position: relative;
	    display: inline-block;
	    background: #D0EEFF;
	    border: 1px solid #99D3F5;
	    border-radius: 4px;
	    padding: 4px 12px;
	    overflow: hidden;
	    color: #1E88C7;
	    text-decoration: none;
	    text-indent: 0;
	    line-height: 20px;
	}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
	}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
	}
	
/*表单验证*/
/*提示框默认隐藏*/
.lowin-wrapper form span{
	display: none;
	}

.infoTip{
	color: gray;
	font-size: 12px;
	position: relative;
    top: 5px;
    left:5px;
	}
.errorTip{
	font-size: 12px;
   	color: #F55;
   	position: relative;
    top: 5px;
    left:5px;
	}
.successTip{
	position: relative;
	display: inline-block;
	background: url(https://passport.baidu.com/static/passpc-account/img/setpwd-success-2x.png) no-repeat center center;
	background-size: contain;
    width: 16px;
   	height: 16px;
   	top:-30px;
   	left:280px;
	}
		
	</style>
</head>

<body>
	<div class="lowin">
		<div class="lowin-brand">
			<img src="img/kodinger.jpg" alt="logo">
		</div>
		<div class="lowin-wrapper">
			<div class="lowin-box lowin-login">
				<div class="lowin-box-inner">
					<form id="loginForm" action="#">
						<p>Sign in to DoCoMusic</p>
						<div class="lowin-group">
							<label>用户<a href="#" class="login-back-link">Sign in?</a></label>
							<input type="loginAccount" autocomplete="loginAccount" name="loginAccount" class="lowin-input" style="border: solid 1px var(--color-dark);" placeholder="请输入手机号码" id="loginAccount">
							<span id="usernameTip" class="infoTip">设置后不可更改！</span>
							<span id="usernameError" class="errorTip">用户号不能为空！</span>
							<span id="usernameSuccess" class="successTip"></span>
						</div>
						<div class="lowin-group password-group">
							<label>密码 <a href="#" class="forgot-link"></a></label>
							<input type="password" name="loginPwd" autocomplete="current-password" class="lowin-input" style="border: solid 1px var(--color-dark);" placeholder="请输入密码" id="loginPwd">
							<span id="passwordTip"  class="infoTip">长度6-14位,不能含空格</span>
							<span id="passwordError"   class="errorTip">不能为空,长度至少6位-14位,不能含空格</span>
							<span id="passwordSuccess" class="successTip"></span>
						</div>
						<button type="button" class="lowin-btn login-btn" id="loginButton" disabled="disabled">
							登录
						</button>
						<div class="text-foot">
							还没有账号? <a href="" class="register-link">注册一下</a>
						</div>
					</form>
				</div>
			</div>
			<div class="lowin-box lowin-register">
				<div class="lowin-box-inner">
					<form id="registerForm" action="${pageContext.request.contextPath}/AccountServlet" method="post" enctype="multipart/form-data">
							
							<input type="hidden" name="op" value="register">
							<p><img src="assets/images/lunbo4.jpg" height="50px" width="50px" style="border-radius: 50%;" id="faceImg"/>
							<a href="javascript:;" class="file" style="margin-top: -20px;">选择文件
							<input type="file" name="accountPicture" id="myFile" value="" accept="image/*"/>
							</a></p>
							
						<p>创建新用户</p>
						<div class="lowin-group">
							<label>用户名</label>
							<input type="text" name="registerAccount" autocomplete="name" class="lowin-input" style="border: solid 1px var(--color-dark);" placeholder="请输入手机号码" id="registerAccount" required="required">
							<span id="resisterUsernameTip" class="infoTip">设置后不可更改！</span>
							<span id="resisterUsernameError" class="errorTip">用户名已存在！</span>
							<span id="resisterUsernameSuccess" class="successTip"></span>
						</div>
					<!--	<div class="lowin-group">
							<label>Email</label>
							<input type="email" autocomplete="email" name="email" class="lowin-input" style="border: solid 1px;">
						</div>-->
						<div class="lowin-group">
							<label>密码</label>
							<input type="password" name="registerPwd" autocomplete="current-password" class="lowin-input" style="border: solid 1px var(--color-dark);" placeholder="请设置密码" id="registerPwd" required="required" >
							<span id="resisterPasswordTip" class="infoTip">长度6-14位,不能含空格</span>
							<span id="registerPasswordError" class="errorTip">不能为空,长度至少6位-14位,不能含空格</span>
							<span id="registerPasswordSuccess" class="successTip"></span>
						</div>
							<div class="lowin-group password-group">
							<label>验证码 <a href="#" class="forgot-link"></a></label>
							<input type="password" name="registerCaptcha" autocomplete="current-password" class="lowin-input2" style="border: solid 1px var(--color-dark);" placeholder="请输入密码" style="width: 10px;" id="registerCaptcha"  required="required">
							<input type="button" name="sendCaptcha" id="sendCaptcha" value="发送验证码" class="lowin-btn2"/>
							<span id="captchaTip" class="infoTip">请输入验证码</span>
							<span id="captchaError" class="errorTip">验证码错误,请重新输入</span>
							<span id="captchaSuccess" class="successTip" style="left:190px"></span>
						</div>
						<button type="submit" class="lowin-btn" id="registerButton">
							注册
						</button>

						<div class="text-foot">
							已经有账号? <a href="" class="login-link">前往登录</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	
		<footer class="lowin-footer">
			<span>豆咖音乐网 DoCoMusic</span>
		</footer>
	</div>

	<script src="js/auth.js"></script>
	<script src="${pageContext.request.contextPath}/front/js/jquery-3.5.1.js"></script>
	
	<script>
	
		//登录页面
		//用户名获取焦点提示信息
		$("#loginAccount").focus(function() {
			$("#usernameTip").css("display","inline-block");
			$("#usernameError").css("display","none");
			$("#usernameSuccess").css("display","none");
		})
		
		//账号失去焦点事件
		$("#loginAccount").blur(function() {
			var loginAccount = $(this).val();
			//定义一个验证手机号的正则表达式
			var pattern = /^1[3456789]\d{9}$/;
			if (loginAccount=="") {
				$("#usernameError").text("用户名不能为空!");
				$("#usernameTip").css("display","none");
				$("#usernameError").css("display","inline-block");
				$("#usernameSuccess").css("display","none");
			}else{
				if (pattern.test(loginAccount)==true) {
					//发送ajax到后台判断用户名是否存在
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/AccountServlet",
						type:"post",
						data:{op:"existsOfAccountTel",accountTel:loginAccount},
						dataType:"text",
						success:function(result,status,xhr){
							if(result=="false"){// 不存在该用户
								$("#usernameError").text("用户不存在!");
								$("#usernameTip").css("display","none");
								$("#usernameError").css("display","inline-block");
								$("#usernameSuccess").css("display","none");
								/* alert("用户名不存在或账户密码错误"); */
								$("#loginAccount").text("");
								$("#loginPwd").text("");
							}else {
								$("#usernameTip").css("display","none");
								$("#usernameError").css("display","none");
								$("#usernameSuccess").css("display","inline-block");
								$("#loginButton").prop("disabled",false);
							}
						},
						error:function(xhr,status,error){
							alert("ajax异步请求失败");
						}
					});
					
				}else if(pattern.test(loginAccount)==false) {
					$("#usernameTip").css("display","none");
					$("#usernameError").text("输入手机号格式有误");
					$("#usernameError").css("display","inline-block");
					$("#usernameSuccess").css("display","none");
				}
			}
			
		})
		
		//密码获取焦点提示信息
		$("#loginPwd").focus(function() {
			$("#passwordTip").css("display","inline-block");
			$("#passwordError").css("display","none");
			$("#passwordSuccess").css("display","none");
		})
		
		//失去焦点验证密码
		$("#loginPwd").blur(function() {
			var loginPwd = $(this).val();
			if(loginPwd.trim().length >=6 && loginPwd.trim().length <= 14 && loginPwd.trim().indexOf(" ") == -1){
				// 通过
				// 显示正确的提示
				$("#passwordTip").css("display","none");
				$("#passwordError").css("display","none");
				$("#passwordSuccess").css("display","inline-block");
			}else{
				$("#passwordTip").css("display","none");
				$("#passwordError").css("display","inline-block");
				$("#passwordSuccess").css("display","none");
			}
		})
		
		//登录按钮
 		$("#loginButton").click(function(){
			var loginAccount = $("#loginAccount").val();
			var loginPwd = $("#loginPwd").val();
			if (loginAccount=="" || loginPwd=="") {
				alert("用户名或密码不能为空")
			}else{
				location.href="${pageContext.request.contextPath}/AccountServlet?op=login&accountTel="+loginAccount+"&accountPwd="+loginPwd;
			}
			
		}); 
		//登录失败跳转回登录页面，携带失败参数
		var loginError = "${param.loginError}";
		if (loginError!="") {
			alert("用户密码错误")
		}
		
		
		//注册
		//用户名获取焦点提示信息
		$("#registerAccount").focus(function() {
			$("#resisterUsernameTip").css("display","inline-block");
			$("#resisterUsernameError").css("display","none");
			$("#resisterUsernameSuccess").css("display","none");
		})
		
		//账号失去焦点事件
		$("#registerAccount").blur(function() {
			var registerAccount = $(this).val();
			//定义一个验证手机号的正则表达式
			var pattern = /^1[3456789]\d{9}$/;
			
			if (registerAccount=="") {
				$("#resisterUsernameError").text("用户名不能为空")
				$("#resisterUsernameTip").css("display","none");
				$("#resisterUsernameError").css("display","inline-block");
				$("#resisterUsernameSuccess").css("display","none");
			} else {
				if (pattern.test(registerAccount)==true) {
					//发送ajax到后台判断用户名是否存在
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/AccountServlet",
						type:"post",
						data:{op:"existsOfAccountTel",accountTel:registerAccount},
						dataType:"text",
						success:function(result,status,xhr){
							if(result=="false"){// 不存在该用户
								$("#resisterUsernameTip").css("display","none");
								$("#resisterUsernameError").css("display","none");
								$("#resisterUsernameSuccess").css("display","inline-block");
								/* alert("用户名不存在或账户密码错误"); */
								$("#loginAccount").text("");
							}else if(result=="true") {
								$("#resisterUsernameTip").css("display","none");
								$("#resisterUsernameError").css("display","inline-block");
								$("#resisterUsernameSuccess").css("display","none");
								$("#registerButton").prop("disabled",false);
								$("#registerAccount").text("");
							}
						},
						error:function(xhr,status,error){
							alert("ajax异步请求失败");
						}
					});
				}else if(pattern.test(registerAccount)==false) {
					$("#resisterUsernameTip").css("display","none");
					$("#resisterUsernameError").text("输入手机号格式有误");
					$("#resisterUsernameError").css("display","inline-block");
					$("#resisterUsernameSuccess").css("display","none");
				}
			}
			
		})
		
		//输入密码验证
		$("#registerPwd").blur(function() {
			var registerPwd = $(this).val();
			if(registerPwd.trim().length >=6 && registerPwd.trim().length <= 14 && registerPwd.trim().indexOf(" ") == -1){
				// 通过
				// 显示正确的提示
				$("#registerPasswordTip").css("display","none");
				$("#registerPasswordError").css("display","none");
				$("#registerPasswordSuccess").css("display","inline-block");
			}else{
				$("#registerPasswordTip").css("display","none");
				$("#registerPasswordError").css("display","inline-block");
				$("#registerPasswordSuccess").css("display","none");
			}
		})
		
		//头像上传预览
			$("#myFile").change(function(){
				var file = $(this).get(0).files[0];
				if (file==null) {
					$("#faceImg").attr("src","#");
				}else {
					var size = file.size/1024
					if (size>90) {
						alert("文件大小不能超过90k");
						$(this).val("");
					}else{
						var reads = new FileReader();
						reads.readAsDataURL(file);
						reads.onload = function(){
							// 显示图片
							$("#faceImg").attr("src",this.result);
						}
					}
				}
			})
			
		//验证码发送ajax请求
		$("#sendCaptcha").click(function() {
			var phoneNum = $("#registerAccount").val();
			var registerPwd = $("#registerPwd").val();
			if (phoneNum=="" || registerPwd=="") {
				alert("用户名或密码不能为空！")
			}else {
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/AccountServlet",
					type:"post",
					data:{op:"sendCaptcha",phoneNum:phoneNum},
					dataType:"text",
					success:function(result,status,xhr){
						alert("验证码已发送，请接收");
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
			}
		})
		
		//验证码焦点提示
		$("#registerCaptcha").focus(function(){
			$("#captchaTip").css("display","inline-block");
			$("#captchaError").css("display","none");
			$("#captchaSuccess").css("display","none");
		})
		
		//对验证码输入框做判断，看验证码是否正确
		$("#registerCaptcha").blur(function() {
			var registerCaptcha = $(this).val();
			/* var random = "${sessionScope.random}"; */
			var random = "123456";
			if (registerCaptcha =="") {
				$("#captchaTip").css("display","none");
				$("#captchaError").text("验证码不能为空");
				$("#captchaError").css("display","inline-block");
				$("#captchaSuccess").css("display","none");
				
			}else {
				if (random==registerCaptcha) {
					$("#captchaTip").css("display","none");
					$("#captchaError").css("display","none");
					$("#captchaSuccess").css("display","inline-block");
				}else {
					$("#captchaTip").css("display","none");
					$("#captchaError").text("验证码输入错误");
					$("#captchaError").css("display","inline-block");
					$("#captchaSuccess").css("display","none");
					$(this).val("");
				}
			}
		})
		
		
		//头像格式错误
		var fileuploaderror = "${param.fileuploaderror}";
		if (fileuploaderror!="") {
			alert("头像格式错误，请重新上传");
		}
		//注册成功重新登录，携带提示参数
		var registerSuccess = "${param.registerSuccess}";
		if (registerSuccess!="") {
			alert("注册成功，请重新登录");
		}
		
	</script>
</body>
</html>